<template>
    <div>
         <el-drawer
            :title="title"
            :visible.sync="drawer"
            :before-close="handleClose"
            custom-class="demo-drawer"
            ref="drawer"
             size="90%">
              <div class="demo-drawer__content">
                    <div class="demo-drawer__content_from">
                        <div class="from">
                            <el-form :model="userForm" :rules="rules" ref="userForm"  label-width="110px" >
                                <el-form-item label="代码位名称：" prop="name">
                                    <el-input v-model="userForm.name"></el-input>
                                </el-form-item>
                                <el-form-item label="代码位分组："   >
                                    <el-select v-model="userForm.group_id" filterable placeholder="请选择">
                                        <el-option
                                            v-for="item in select_codebits" 
                                            :key="item.id"  
                                            :label="item.name" 
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item label="标签：" >
                                    <el-input v-model="userForm.label"></el-input>
                                </el-form-item> -->
                                <el-form-item label="载体类型：" >
                                    <el-radio-group  v-model="userForm.flow_type" size="medium" @input="radio1fun">
                                        <el-radio-button :label='1'>pc</el-radio-button>
                                        <el-radio-button :label='2'>移动网页</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="代码位尺寸：">
                                    <el-tabs   :value="tabs" class="tablist" @tab-click="tabClick">
                                        <el-tab-pane  v-for="(item,i) in data_size" :key="item.value"  :label="item.name" :name="String(i)">
                                           <div class="ul_tab" v-if="(i<3)">
                                                 <div  v-for='(item2,b) in item.arr' @click="tabsize(item2)" :class="type_w_h(userForm.c_width,userForm.c_height) ==item2 ? 'on li_tab' :'li_tab' " :key="b">{{item2}}</div>
                                            </div>
                                            <div v-else>
                                                <el-form-item label="尺寸宽(px)：">
                                                    <el-input
                                                        placeholder="请输入宽度"
                                                        v-model="item.width"
                                                        @blur="width_fun"
                                                        @focus="inputfocus(item.width,'w')"
                                                        @clear="width_fun(item.width)"
                                                        clearable
                                                        size="small"
                                                        >
                                                    </el-input>
                                                    <el-tooltip placement="bottom-end">
                                                        <div slot="content">注意：0*0尺寸仅支持富媒体物料直投，<br/>
                                                            其他变现方式无法正常展现（不支持竞价）进而影响您的广告收益， <br/>请谨慎设置。
                                                        </div>
                                                        <div class="ico">?</div>
                                                    </el-tooltip>
                                                </el-form-item>
                                                <el-form-item label="尺寸高(px)：">
                                                    <el-input
                                                        placeholder="请输入高度"
                                                        v-model="item.height"
                                                        @blur="height_fun"
                                                        @focus="inputfocus(item.height,'h')"
                                                        @clear="width_fun(item.height)"
                                                        clearable
                                                        size="small"
                                                        >
                                                    </el-input>
                                                </el-form-item>
                                             
                                            </div>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="demo-drawer__footer">
                            <el-button type="primary"  @click="submitForm('userForm')" :loading="loading">{{ loading ? '提交中 ...' :  title=='修改代码位'?  ' 修 改' :'新 建' }}</el-button>
                            <el-button @click="handleClose">取 消</el-button>
                        </div>
                    </div>
                </div>
         </el-drawer>
    </div>
</template>
<script>
// 获取代码  位
// import{init}from'https://now.bdstatic.com/stash/v1/ba4947d/ai-docs-bot/2d539a9/sdk/ai-docs-bot-1.3.0-beta.1.js';
import { axios_adversense ,axios_adsense_update } from "@/api/infor";
export default {
    name:'drawer_Code',
    data(){
        return{
            loading:false,
            rules:{
                name: [
                    { required: true, message: '请输入代码位名称', trigger: 'blur' }
                ] 
            },
            userForm:{
                adver_type:this.title=="新建代码位" ? 1 :2,
                id:'',    
                name:'',  //代码位名称
                group_id:'',     //代码位分组
                ad_place:'',     //广告位置
                flow_type:1,   //代码位载体
                c_width:0,
                c_height:0,
            },
            tabs:"0",
            select_codebits_val:'全部',
            select_codebits:[{name:"全部",id:0}],
            data_size:[
                {
                    name:'横幅',
                    arr:['785*90','900*350','1000*90','1160*90','1200*90','766*120'],
                },
                {
                    name:'竖幅',
                    arr:['164*244','110*900', ],
                },
                {
                    name:'矩形',
                    arr:['220*440','320*260','326*318','346*145','346*288','784*442','1920*1080',],
                },
                {
                    name:'自定义',
                    width:'0',
                    height:'0',
                }
            ],
        }
    },
    props:{
        drawer:{
            type: Boolean,
            default:false,
        },
        item:{
        },
        title:{},
    },
    computed:{
       datawatch(){
          let title=this.title
          let item=this.item;
          return {title,item}
       }
    },
    watch:{
        datawatch:{
            immediate:true,
            handler(n){
                if(n.title=="修改代码位" && n.item!='' ){
                    this.userForm.c_width=n.item.c_width;
                    this.userForm.c_height=n.item.c_height;
                     this.userForm.name=n.item.name;
                     this.userForm.group_id=n.item.group_id;
                     this.userForm.id=n.item.id;
                     this.userForm.flow_type=n.item.flow_type;
                    let size=n.item.c_width+'*'+n.item.c_height;
                    this.sizefun(size)
                }else{
                    Object.assign(this.$data,this.$options.data.call(this))
                } 
            }
        }
    },
    created(){
        this.axiosAdversense() //代码组
    },
    methods:{
          // 下拉框选项搜索
        filterselect(type,e){
            if(type=='codebits'){this.userForm.group_id=e}
        },
        handleClose(){
            this.$emit("handleClose2",this.drawer)
        },
        // 定位代码位得尺寸
        sizefun(val){
            try{
                this.data_size.forEach((item,i)=>{
                if(item.arr){
                    if(item.arr.includes(val)){
                        this.tabs=String(i);
                        throw new Error();
                    }else{
                        let arr=val.split("*")
                        this.tabs=String(3);
                        this.data_size[3].width=arr[0];
                        this.data_size[3].height=arr[1];
                        return false;
                    }
                }
               
            })
            }catch(err){
                console.log("err")
            }
        },
        radio1fun(val){
           if(val=="pc"){
            //  this.userForm.type="嵌入";
           }
        },
        tabsize(val){
           this.userForm.c_width=val.split("*")[0];
           this.userForm.c_height=val.split("*")[1];
        },
        width_fun(e){
            if(e==''){
                this.data_size[3].width=0
            }else{
                if(e.target.value==''){
                    this.data_size[3].width=0
                } 
            }
        },
        height_fun(e){
            if(e==''){
                this.data_size[3].height=0
            }else{
                if(e.target.value==''){
                    this.data_size[3].height=0
                } 
            }
        },
        inputfocus(val,size){
            if(val==0){
               if(size=='w'){this.data_size[3].width=''}
               if(size=='h'){this.data_size[3].height=''}
            }
          
        },
        tabClick(e){
            this.tabs=e.index;
        },
        type_w_h(w,h){
            let size=""+w+"*"+h+""
            return size
        },
          // 提交个人信息
          submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.tabs==3){
                        this.userForm.c_width=this.data_size[3].width;
                        this.userForm.c_height=this.data_size[3].height;
                    }
                    this.loading = true;
                     axios_adsense_update(this.userForm).then((res) => {
                        if(res.data.code==1){
                            this.loading=false;
                             this.$emit("handleClose2",this.drawer)
                             this.$emit("codeUpdate",true)
                        }
                    }).catch(( )=>{})
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
           // 获取代码组的分类
        axiosAdversense(){
           axios_adversense({model:4,flow_type:'0'}).then((res) => {
                 this.select_codebits.push(res.data.data);
                 this.select_codebits=this.select_codebits.flat(Infinity)
            }).catch(( )=>{})
        },

    }
}
</script>
 